 /*
 * @description: 售后维权表格
 * @Author: along
 * @Date: 2020-10-23
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2021-04-09 15:11:41
 */
<template>
    <div class="tableProtection">
        <!-- 无数据  -->
        <div
            class="tableWrap"
            v-if="table.length == 0"
        >
            暂无数据
        </div>

        <!-- 数据列表 -->
        <div
            v-else
            class="orderSelfList"
            v-loading="loading"
        >
            <div class="order_header">
                <div class="order_nav">
                    <div
                        v-for="(title,index) in tableHeader"
                        :key="index"
                        class="order_title"
                        :class="'header'+ index"
                        :style="{
                            width: index == 0 ? '372px' : 'auto',
                            flex: index == 0 ? 'none' : 1,
                            paddingLeft: '0px', paddingRight: '0px', textAlign: 'center'
                        }"
                    >
                        {{ title }}
                    </div>
                </div>
            </div>
            <div class="order_self">
                <div class="order_wrap">
                    <div
                        v-for="(row,index) in table"
                        :key="index"
                        class="order_list"
                        :style="{width: maxWidth ? '1993px': 'auto'}"
                    >
                        <!-- 订单信息 -->
                        <div class="order_data">
                            <div class="order_info">
                                <p class="order_no">
                                    订单编号: {{ row.order_no ? row.order_no : '--' }}
                                </p>
                                <p class="order_time">
                                    申请时间: {{ row.create_time * 1000 | dateFormat('yyyy/MM/dd HH:mm') }}
                                </p>
                            </div>
                            <div class="nav-right">
                                <div
                                    class="order_detail"
                                    @click="checkDetail(row)"
                                >
                                    查看详情
                                </div>
                            </div>
                        </div>

                        <!-- 商品数据列表 -->
                        <div class="order_content orderHeight">
                            <div
                                class="order_side"
                                data-info="商品信息"
                                :style="{width: '372px', flex: 'none', alignItems: 'flex-start'}"
                            >
                                <div
                                    v-for="(item, key) in row.order_item_list"
                                    :key="key"
                                    class="order_side_info"
                                >
                                    <img
                                        :src="item.goods_info.thumb_pic"
                                        class="order_cover"
                                        @click="fnPreviewimg(item.goods_info.thumb_pic)"
                                    >
                                    <div class="order_product">
                                        <p
                                            v-if="item.goods_info.title"
                                            class="order_title"
                                        >
                                            {{ item.goods_info.title }}
                                        </p>
                                        <p
                                            v-if="item.goods_product_info.goods_specs.length > 0"
                                            class="order_spec"
                                        >
                                            {{ item.goods_product_info.goods_specs | filterSpec }}
                                        </p>
                                        <p
                                            class="order_price"
                                        >
                                            ￥{{ row.order_item_list[0].price }} x{{ row.order_item_list[0].num }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="order_side"
                                data-info="实付金额"
                                :style="{
                                    height: row.order_item_list.length * 132 + 'px'}"
                            >
                                <div
                                    class="order_side_info"
                                    :style="{width: '80%', textAlign: 'center', lineHeight: '22px'}"
                                >
                                    ￥{{ row.order_item_list[0].money }}
                                </div>
                            </div>
                            <div
                                class="order_side order_side_info_fatch order_side_bottom"
                                data-info="用户信息"
                                :style="{

                                    height: row.order_item_list.length * 132 + 'px', justifyContent: 'center'
                                }"
                            >
                                <p class="order_side_name">
                                    {{ row.student_true_name ? row.student_true_name : '--' }}
                                </p>
                                <p class="order_side_phone">
                                    {{ row.student_phone ? row.student_phone : '--' }}
                                </p>
                            </div>
                            <div
                                class="order_side"
                                data-info="售后类型"
                                :style="{height: row.order_item_list.length * 132 + 'px'}"
                            >
                                <div class="order_side_info">
                                    <div v-if="row.status !== -2">
                                        <div v-if="row.type == 1">
                                            仅退款
                                        </div>
                                        <div v-if="row.type == 2">
                                            退货退款
                                        </div>
                                        <div v-if="row.type == 3">
                                            换货
                                        </div>
                                        <span v-if="row.type == 3">{{ `：${row.cancel_apply_num ? row.cancel_apply_num : '--'}件` }}</span>
                                    </div>
                                    <div v-else>
                                        --
                                    </div>
                                </div>
                            </div>
                            <div
                                class="order_side"
                                data-info="售后原因"
                                :style="{

                                    height: row.order_item_list.length * 132 + 'px'}"
                            >
                                <div
                                    class="order_side_info"
                                    :style="{width: '80%', textAlign: 'center', lineHeight: '22px'}"
                                >
                                    {{ row.reason ? row.reason : '--' }}
                                </div>
                            </div>
                            <div
                                class="order_side no-padding"
                                data-info="退款金额"
                                :style="{height: row.order_item_list.length * 132 + 'px'}"
                            >
                                <div class="order_side_info">
                                    {{ row.refund_money ? '¥' + row.refund_money : '--' }}
                                </div>
                            </div>
                            <div
                                class="order_side"
                                data-info="售后状态"
                                :style="{
                                    height: row.order_item_list.length * 132 + 'px', justifyContent: 'center'}"
                            >
                                <div class="order_cloum">
                                    <p :style="{color: row.status == 1 ? '#FF3030' : '#333333', fontSize: '14px', fontWeight: '400'}">
                                        {{ row.status | filterRefund }}
                                    </p>
                                    <div class="btn-group">
                                        <!-- 申请中/退货申请审核通过 -->
                                        <div
                                            v-if="(row.status == 1 || row.status == 2) && row.status == 12"
                                            class="order_detail border"
                                            @click="refuseRefud(row)"
                                        >
                                            拒绝退款
                                        </div>
                                        <!-- 仅退款-申请中  退货退款-退货退款申请通过 -->
                                        <div
                                            v-if="(row.type == 1 && row.status == 1) || (row.type == 2 && row.status == 1)"
                                            class="order_detail border"
                                            @click="agreeRefud(row)"
                                        >
                                            同意退款
                                        </div>
                                        <!-- 退货退款-申请中 -->
                                        <div
                                            v-if="(row.type == 2 || row.type == 3) && row.status == 12"
                                            class="order_detail border"
                                            @click="confirmGoods(row)"
                                        >
                                            确认收货
                                        </div>
                                        <!-- 同意换货 -->
                                        <div
                                            v-if="row.type === 3 && row.status === 1"
                                            class="order_detail border"
                                            @click="$refs.agreeExchange.show(row)"
                                        >
                                            同意换货
                                        </div>
                                        <!-- 拒绝换货 -->
                                        <div
                                            v-if="row.type === 3 && row.status === 1"
                                            class="order_detail border"
                                            @click="$refs.refuseExchange.show(row)"
                                        >
                                            拒绝换货
                                        </div>
                                        <!-- 换货-拒绝收货 -->
                                        <div
                                            v-if="row.type === 3 && row.status === 12"
                                            class="order_detail border"
                                            @click="$refs.refuseReceive.show(row)"
                                        >
                                            拒绝收货
                                        </div>
                                        <!-- 换货-发货 -->
                                        <div
                                            v-if="row.type === 3 && row.status === 13"
                                            class="order_detail border"
                                            @click="$refs.exchangeDelivery.show(row)"
                                        >
                                            发货
                                        </div>
                                        <!-- 换货-修改快递单号 -->
                                        <div
                                            v-if="row.type === 3 && row.status === 14"
                                            class="order_detail border"
                                            @click="$refs.exchangeChangeLogistics.show(row)"
                                        >
                                            修改快递单号
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 同意退款弹窗 -->
            <el-dialog
                title="同意退款"
                :visible.sync="dialogVisibAgree"
                width="640px"
                :close-on-click-modal="false"
            >
                <div class="agreeMod">
                    <div class="mod-list">
                        <p class="mod-list-title">
                            处理方式
                        </p>
                        <p class="mod-list-content">
                            {{ type == 2 ? '退货退款' : '仅退款' }}
                        </p>
                    </div>
                    <div class="mod-list">
                        <p
                            class="mod-list-title"
                            :style="{marginRight: '10px'}"
                        >
                            处理结果
                        </p>
                        <el-radio
                            v-model="agreeRefund.type"
                            label="1"
                        >
                            同意退款(无需用户发货直接退款)
                        </el-radio>
                        <el-radio
                            v-model="agreeRefund.type"
                            label="2"
                        >
                            通过申请(需要买家寄回商品)
                        </el-radio>
                    </div>
                    <div
                        class="mod-list"
                        v-if="agreeRefund.type == '2'"
                    >
                        <p class="mod-list-title">
                            退货地址
                        </p>
                        <el-select
                            v-model="agreeRefund.refund_adress"
                            clearable
                            filterable
                            placeholder="请选择退货地址"
                            size="small"
                            :style="{width: '368px'}"
                        >
                            <el-option
                                v-for="item in agreeRefund.refundList"
                                :key="item.address_no"
                                :label="item.address_title"
                                :value="item.address_no"
                            />
                        </el-select>
                        <p
                            :style="{color: '#20A0FF', cursor: 'pointer', fontSize: '14px', fontWeight: '500', marginLeft: '12px', whiteSpace: 'nowrap'}"
                            @click="() => {
                                this.$router.push({
                                    name: 'manage-market-good-after-edit'
                                })
                            }"
                        >
                            新增地址
                        </p>
                    </div>
                    <div
                        class="mod-list"
                        :style="{alignItems: 'flex-start'}"
                        v-if="agreeRefund.type == '2'"
                    >
                        <p class="mod-list-title">
                            退货备注
                        </p>
                        <el-input
                            v-model="agreeRefund.refund_mark"
                            type="textarea"
                            :autosize="{ minRows: 4, maxRows: 6}"
                            placeholder="请输入退款备注"
                            maxlength="20"
                            show-word-limit
                            :style="{width: '444px'}"
                        />
                    </div>
                </div>
                <span
                    slot="footer"
                    class="dialog-footer"
                >
                    <el-button
                        @click="dialogVisibAgree = false"
                        size="medium"
                        type="default"
                        :style="{width: '120px', marginRight: '32px'}"
                    >
                        取 消
                    </el-button>
                    <el-button
                        type="primary"
                        size="medium"
                        :style="{width: '120px'}"
                        :disabled="agreeRefund.type == '1' ? false : (!agreeRefund.refund_adress || !agreeRefund.refund_mark)"
                        @click="fnConfirmRefund()"
                    >
                        确 认
                    </el-button>
                </span>
            </el-dialog>

            <!-- 拒绝退款弹窗 -->
            <el-dialog
                title="拒绝退款"
                :visible.sync="dialogVisibRefuse"
                width="640px"
                :close-on-click-modal="false"
            >
                <el-input
                    v-model="refuse_mark"
                    type="textarea"
                    :autosize="{ minRows: 4, maxRows: 6}"
                    placeholder="请输入拒绝退款理由"
                    maxlength="20"
                    show-word-limit
                    :style="{width: '512px'}"
                />
                <span
                    slot="footer"
                    class="dialog-footer"
                    :style="{marginTop: '20px'}"
                >
                    <el-button
                        @click="dialogVisibRefuse = false"
                        size="medium"
                        type="default"
                        :style="{width: '120px', marginRight: '32px'}"
                    >
                        取 消
                    </el-button>
                    <el-button
                        type="primary"
                        size="medium"
                        :disabled="!refuse_mark"
                        :style="{width: '120px'}"
                        @click="fnRefuseRefund()"
                    >
                        确 认
                    </el-button>
                </span>
            </el-dialog>

            <!-- 同意换货弹窗-->
            <agree-exchange
                ref="agreeExchange"
                @update="$emit('update')"
            />
            <!-- 拒绝换货弹窗-->
            <refuse-exchange
                ref="refuseExchange"
                @update="$emit('update')"
            />
            <!-- 拒绝收货弹窗-->
            <refuse-receive
                ref="refuseReceive"
                @update="$emit('update')"
            />
            <!-- 发货弹窗-->
            <exchange-delivery
                ref="exchangeDelivery"
                @update="$emit('update')"
            />
            <!-- 更改物流弹窗-->
            <exchange-change-logistics
                ref="exchangeChangeLogistics"
                @update="$emit('update')"
            />
            <!-- 图片预览 -->
            <img-preview
                ref="imgPreview"
            />
        </div>
    </div>
</template>

<script>
import imgPreview from '@/components/common/img-preview';
import agreeExchange from '@/components/manage/market/agree-exchange';
import refuseReceive from '@/components/manage/market/refuse-receive';
import exchangeDelivery from '@/components/manage/market/exchange-delivery';
import exchangeChangeLogistics from '@/components/manage/market/exchange-change-logistics';
import refuseExchange from '@/components/manage/market/refuse-exchange';

const AGREE_MOD = {
    refund_adress: '',
    refundList: [],
    refund_mark: '',
    type: '2'
};

const REFUSE_MOD = {
    refuse_mark: ''
};

const DIALOG = {
    dialogVisibAgree: false,//同意退款弹窗开关
    dialogVisibRefuse: false,//拒绝退款弹窗开关
};

export default {
    name: 'TableProtection',
    components: {
        imgPreview,
        agreeExchange,
        refuseReceive,
        exchangeDelivery,
        exchangeChangeLogistics,
        refuseExchange
    },
    props: {
        table: {
            type: Array,
            default: () => {}
        },
        tableType:{
            type: String,
            default: ''
        }
    },
    data () {
        return {
            apply_no: '',//唯一商品退款编号
            maxWidth: false,
            tableHeader: ['商品信息','实付金额','用户信息','售后类型','售后原因','退款金额','售后状态'],
            ...DIALOG,
            agreeRefund: {
                ...AGREE_MOD
            },
            ...REFUSE_MOD,
            type: '',
            loading: false
        };
    },
    watch: {
        dialogVisibAgree (val) {
            if(!val) {
                this.$set(this.agreeRefund, 'refund_adress', '');
                this.$set(this.agreeRefund, 'refund_mark', '');
                this.$set(this.agreeRefund, 'type', '2');
            }
        },
        dialogVisibRefuse (val) {
            if(!val) {
                this.refuse_mark = '';
            }
        },
    },
    filters: {
        filterSpec (val) {
            let str = '';

            val.forEach(element => {
                str += element.spec_name + ';' + element.spec_value + ';';
            });

            return str;
        },
        filterRefund (val) {
            switch (val) {
                case 0:
                    return '未申请';
                case 1:
                    return '售后待处理';
                case 2:
                    return '售后完成';
                case 3:
                    return '售后关闭';
                case 11:
                    return '商家同意售后申请';
                case 12:
                    return '买家已退货，待商家确认收货';
                case 13:
                    return '等待商家发货';
                case 14:
                    return '商家已发货';
                case 15:
                    return '换货待买家签收';
                case -1:
                    return '拒绝售后申请';
                case -2:
                    return '用户撤销申请';
                case -3:
                    return '商家拒绝收货';
                default:
                    return '';
            }
        },
        filterreson (val) {
            if(val.length < 7) return val;
            return val.slice(0,7) + '...';
        }
    },
    mounted () {
        this.init();
        // setTimeout(()=>{
        //     this.scrollAnsync();
        //     this.loading = false;
        // },1500);
    },
    methods: {
        /**
         * @description 初始化页面数据
         */
        init () {
            this.getRefundList();
        },

        /**
         * @description 获取退货地址列表
         */
        getRefundList () {
            this.$post('/ShopRefundAddress/getList', {}, resp => {
                if (resp.code == 1) {
                    this.agreeRefund.refundList = resp.data.list;

                    //设置默认选中地址
                    for(let key = 0; key < this.agreeRefund.refundList.length; key ++) {
                        if(this.agreeRefund.refundList[key].is_default == 1) {
                            this.$set(this.agreeRefund, 'refund_adress', this.agreeRefund.refundList[key].address_no);
                        }
                    }
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 查看详情
         */
        checkDetail (row) {
            this.$router.push({
                name: 'manage-market-good-after-detail',
                query: {
                    no: row.apply_no
                }
            });
        },

        /**
         * @description 拒绝退款
         */
        refuseRefud (row) {
            this.apply_no = row.apply_no;
            this.dialogVisibRefuse = !this.dialogVisibRefuse;
        },

        /**
         * @description 确定拒绝退款
         */
        fnRefuseRefund () {
            this.$post('/ShopGoodsOrderCancelApply/verify', {
                apply_no: this.apply_no,
                type: 2,
                refuse_reason: this.refuse_mark
            }, resp => {
                if (resp.code == 1) {
                    this.dialogVisibRefuse = !this.dialogVisibRefuse;
                    this.$emit('update');
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        duration: 2000,
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 同意退款
         *      流程:退货退款/仅退款
         */
        agreeRefud (row) {
            this.apply_no = row.apply_no;
            this.type = row.type;

            //退货退款流程
            if(row.type == 2) {
                if(row.status == 1) {
                    // this.$confirm('一旦通过，则只会发送您的寄件信息给买家，而不会直接通过退款。请您耐心等待买家退货后，再返回后台进行通过退款', '提示', {
                    //     confirmButtonText: '通过',
                    //     cancelButtonText: '取消',
                    //     type: 'warning'
                    // }).then(() => {
                    //     this.dialogVisibAgree = !this.dialogVisibAgree;
                    //     // this.refundverfiy(row).then(resp => {});
                    // });
                    this.dialogVisibAgree = !this.dialogVisibAgree;
                }

                if(row.status == 11) {
                    this.$confirm('是否要通过退款', '提示', {
                        confirmButtonText: '通过',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$post('/ShopGoodsOrderCancelApply/verify', {
                            apply_no: row.apply_no,
                            type: 1
                        }, resp => {
                            if (resp.code == 1) {
                                this.$emit('update');
                                this.$notify({
                                    title: '提示',
                                    message: '操作成功',
                                    duration: 2000,
                                    type: 'success'
                                });
                            } else {
                                this.$notify({
                                    title: '警告',
                                    message: resp.msg,
                                    duration: 2000,
                                    type: 'warning'
                                });
                            }
                        });
                    });
                }
            }

            // 仅退款流程  订单状态,99:全部,0:待支付,1:拼团中,2:待发货,3:待收货,4:订单完成,-1:订单取消
            if(row.type == 1) {
                if(row.status == 1 && row.order_status == 3) {
                    this.$confirm('如果订单已发出，请先联系物流商追回该快递，再审核通过', '提示', {
                        confirmButtonText: '我知道了',
                        cancelButtonText: '已追回',
                        type: 'warning'
                    }).then(() => {}).catch(() => {
                        this.$confirm('你已召回该快递，是否通过该退款？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.$post('/ShopGoodsOrderCancelApply/verify', {
                                apply_no: row.apply_no,
                                type: 1
                            }, resp => {
                                if (resp.code == 1) {
                                    this.$emit('update');
                                    this.$notify({
                                        title: '提示',
                                        message: '操作成功',
                                        duration: 2000,
                                        type: 'success'
                                    });
                                } else {
                                    this.$notify({
                                        title: '警告',
                                        message: resp.msg,
                                        duration: 2000,
                                        type: 'warning'
                                    });
                                }
                            });
                        });
                    });
                }
                if(row.status == 1 && (row.order_status == 2 || row.order_status == 4)) {
                    this.$confirm('是否通过退款?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$post('/ShopGoodsOrderCancelApply/verify', {
                            apply_no: row.apply_no,
                            type: 1
                        }, resp => {
                            if (resp.code == 1) {
                                this.$emit('update');
                                this.$notify({
                                    title: '提示',
                                    message: '操作成功',
                                    duration: 2000,
                                    type: 'success'
                                });
                            } else {
                                this.$notify({
                                    title: '警告',
                                    message: resp.msg,
                                    duration: 2000,
                                    type: 'warning'
                                });
                            }
                        });
                    });
                }
            }
        },

        /**
         * @description 通过退货退款申请(废弃)
         */
        refundverfiy (row) {
            return new Promise((resolve,reject) => {
                this.$post('/ShopGoodsOrderCancelApply/verify', {
                    apply_no: row.apply_no,
                    type: 3
                }, resp => {
                    if (resp.code == 1) {
                        resolve();
                    } else {
                        this.$notify({
                            title: '警告',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            });
        },

        /**
         * @description 退货退款申请/确认退货信息并同意退款
         */
        fnConfirmRefund () {
            let data = {};

            if(this.agreeRefund.type == '2') {
                data = {
                    apply_no: this.apply_no,
                    type: 3,
                    reject_address_no: this.agreeRefund.refund_adress,
                    reject_remark: this.agreeRefund.refund_mark
                };
            }

            if(this.agreeRefund.type == '1') {
                data = {
                    apply_no: this.apply_no,
                    type: 1,
                    reject_address_no: '',
                    reject_remark: ''
                };
            }

            this.$post('/ShopGoodsOrderCancelApply/verify', {
                ...data
            }, resp => {
                if (resp.code == 1) {
                    this.dialogVisibAgree = !this.dialogVisibAgree;
                    this.$emit('update');
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        duration: 2000,
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 确认收货
         *  type 类型, 1:取消订单申请通过(退货退款需先通过退货申请), 2:拒绝取消订单申请, 3:通过退货申请
         */
        confirmGoods (row) {
            // type 换货 4 退货退款 1
            let type = row.type === 3 ? 4 : 1;

            this.$confirm('确认已经收到货物?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/ShopGoodsOrderCancelApply/verify', {
                    apply_no: row.apply_no,
                    type
                }, resp => {
                    if (resp.code == 1) {
                        this.$emit('update');
                        this.$notify({
                            title: '提示',
                            message: '操作成功',
                            duration: 2000,
                            type: 'success'
                        });
                    } else {
                        this.$notify({
                            title: '警告',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            });
        },

        /**
         * @description 图片预览
         */
        fnPreviewimg (url) {
            this.$refs.imgPreview.show([
                url
            ], 0);
        },
        /**
         * @description 监听横向滚动,触发同步更新
         */
        scrollAnsync () {
            this.$nextTick(() => {
                document.querySelector('.order_self').addEventListener('scroll', e => {
                    document.querySelector('.order_header').scrollLeft = e.target.scrollLeft > 100 ? e.target.scrollLeft + 3 : e.target.scrollLeft;
                },false);

                document.querySelector('.order_header').addEventListener('scroll', e => {
                    document.querySelector('.order_self').scrollLeft = e.target.scrollLeft > 100 ? e.target.scrollLeft - 3 : e.target.scrollLeft;
                },false);

                window.onresize = window.onload = e => {
                    this.maxWidth = e.currentTarget.innerWidth < 1921 ? true : false;
                };
                this.maxWidth = window.innerWidth < 1921 ? true : false;
            });
        },
    }
};
</script>

<style lang="less" scoped>
.tableProtection {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow-y: auto;
    .tableWrap {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: 1px #EBEEF5 solid;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 12px;
        color: #999999;
    }

    .orderSelfList {
        width: 100%;
        flex: 1;
        overflow: hidden;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        // nav
        .order_header {
            width: 100%;
            height: 44px;
            background: #F2F2F2;
            overflow: auto;
            &::-webkit-scrollbar {
                width: 0;
                height: 0;
            }
            .order_nav {
                width: auto;
                height: 44px;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                .order_title {
                    color: #333;
                    font-size: 14px;
                    font-weight: 500;
                    box-sizing: border-box;
                    white-space: nowrap;
                    // border-left: 1px red solid;
                }
            }
        }
        // table
        .order_self {
            width: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: auto;
            // border: 1px red solid;
            &::-webkit-scrollbar {
                width: 3px;
                height: 3px;
            }
            .order_wrap {
                flex: 1;
                width: 100%;
                .order_list {
                    background: #FBFBFB;
                    border-radius: 2px;
                    border: 1px #EEEEEE solid;
                    border-bottom: none;
                    margin-top: 13px;
                    // 订单信息
                    .order_data {
                        width: calc(100% - 48px);
                        height: 44px;
                        margin-left: 24px;
                        margin-right: 24px;
                        box-sizing: border-box;
                        border-bottom: 1px #EEEEEE solid;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .order_info {
                            display: flex;
                            align-items: center;
                            .order_category {
                                width: 64px;
                                height: 20px;
                                text-align: center;
                                line-height: 20px;
                                white-space: nowrap;
                                overflow: hidden;
                                color: #F2F2F2;
                                border-radius: 2px;
                                background: #FF8E39;
                                font-size: 12px;
                                margin-right: 12px;
                            }
                            .order_no {
                                color: #333;
                                font-size: 12px;
                            }
                            .order_time {
                                color: #333;
                                font-size: 12px;
                                margin-left: 32px;
                            }
                        }
                        .nav-right {
                            display: flex;
                            align-items: center;
                            .order_detail {
                                width: 68px;
                                height: 26px;
                                cursor: pointer;
                                text-align: center;
                                line-height: 26px;
                                border-radius: 13px;
                                color: #333;
                                font-weight: 500;
                                font-size: 12px;
                                border: 1px #D7D7D7 solid;
                                margin-left: 12px;
                            }
                            .border {
                                border: 1px #20A0FF solid;
                                color: #20A0FF;
                            }
                        }
                    }

                    //备注
                    .order_remark {
                        width: calc(100% - 48px);
                        height: 44px;
                        margin-left: 24px;
                        margin-right: 24px;
                        box-sizing: border-box;
                        border-top: 1px #EEEEEE solid;
                        display: flex;
                        align-items: center;
                        color: #333;
                        font-size: 12px;
                        font-weight: 500;
                        &>p {
                            color: #333;
                            font-size: 12px;
                            font-weight: 400;
                            margin-left: 5px;
                        }
                    }

                    //内容
                    .order_content {
                        display: flex;
                        align-items: center;
                        height: 100%;
                        .order_view {
                            margin: 16px 0;
                            display: flex;
                            align-items: center;
                            height: 100px;
                            box-sizing: border-box;
                            padding-left: 40px;
                            border-right: 1px #EEEEEE solid;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            color: #333333;
                            font-weight: 500;
                            flex: 1;
                            padding: 0 40px;
                            box-sizing: border-box;
                            min-width: 141px;
                            .order_cloum {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                .order_cloum_name {
                                    color: #333;
                                    font-size: 14px;
                                    font-weight: 500;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    width: 120px;
                                }
                                .order_cloum_phone {
                                    color: #333;
                                    font-size: 14px;
                                    font-weight: 500;
                                    margin-top: 10px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    width: 120px;
                                }
                                .order_money {
                                    color: #EE4E59;
                                    font-size: 14px;
                                    font-weight: 500;
                                }
                                .order_freight {
                                    color: #333333;
                                    font-size: 14px;
                                    margin-top: 10px;
                                }
                                .order_cloumn_button {
                                    width: 100px;
                                    height: 30px;
                                    color: #ffffff;
                                    text-align: center;
                                    line-height: 30px;
                                    font-size: 12px;
                                    margin-top: 12px;
                                    cursor: pointer;
                                    background: #20A0FF;
                                    border-radius: 15px;
                                }
                            }
                            .order_cover {
                                width: 100px;
                                height: 100px;
                                margin-right: 10px;
                            }
                            .order_product {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                .order_title {
                                    width: 198px;
                                    color: #333;
                                    font-size: 14px;
                                    font-weight: 500;
                                    line-height: 20px;
                                    overflow : hidden;
                                    text-overflow: ellipsis;
                                    display: -webkit-box;
                                    -webkit-line-clamp: 2;
                                    -webkit-box-orient: vertical;
                                    margin-bottom: 19px;
                                    white-space: normal;
                                }
                                .order_spec {
                                    height: 16px;
                                    width: 198px;
                                    line-height: 16px;
                                    color: #666;
                                    font-size: 12px;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                            }
                        }
                        .order_side {
                            display: flex;
                            flex-direction: column;
                            flex: 1;
                            align-items: center;
                            border-right: 1px #EEEEEE solid;
                            border-bottom: 1px #EEEEEE solid;
                            height: 100%;
                            justify-content: center;
                            // padding: 0 40px;
                            .order_side_info_fatch {
                                width: 100%;
                                box-sizing: border-box;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                flex-direction: column;
                            }
                            .order_side_bottom {
                                border-bottom: 1px #EEEEEE solid;
                                .order_side_name {
                                    color: #333;
                                    font-size: 14px;
                                    font-weight: 500;
                                    // width: 150px;
                                    line-height: 22px;
                                    text-align: center;
                                    overflow: hidden;
                                }
                                .order_side_phone {
                                    color: #333;
                                    font-size: 14px;
                                    font-weight: 500;
                                    margin-top: 10px;
                                }
                            }
                            .order_side_name {
                                color: #333;
                                font-size: 14px;
                                // width: 150px;
                                line-height: 22px;
                                text-align: center;
                                overflow: hidden;
                                padding: 0 15px;
                            }
                            .order_side_phone {
                                color: #333;
                                font-size: 14px;
                                margin-top: 5px;
                            }
                            .order_side_info {
                                width: 100%;
                                display: flex;
                                height: 132px;
                                align-items: center;
                                justify-content: center;
                                box-sizing: border-box;
                                font-weight: 400;
                                .order_cover {
                                    width: 100px;
                                    height: 100px;
                                    margin-right: 10px;
                                }
                                .order_product {
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    .order_title {
                                        width: 222px;
                                        color: #333;
                                        font-size: 14px;
                                        font-weight: 500;
                                        line-height: 20px;
                                        overflow : hidden;
                                        text-overflow: ellipsis;
                                        display: -webkit-box;
                                        -webkit-line-clamp: 2;
                                        -webkit-box-orient: vertical;
                                        margin-bottom: 19px;
                                        white-space: normal;
                                        padding-right: 24px;
                                    }
                                    .order_spec {
                                        height: 16px;
                                        width: 222px;
                                        line-height: 16px;
                                        color: #666;
                                        font-size: 12px;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        padding-right: 24px;
                                    }
                                    .order_price {
                                        height: 16px;
                                        width: 222px;
                                        line-height: 16px;
                                        font-size: 12px;
                                        font-family: PingFangSC-Regular, PingFang SC;
                                        font-weight: 400;
                                        color: #333333;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        margin-top: 6px;
                                    }
                                }
                            }
                            .order_cloum {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                .order_cloumn_button {
                                    width: 100px;
                                    height: 30px;
                                    color: #ffffff;
                                    text-align: center;
                                    line-height: 30px;
                                    font-size: 12px;
                                    margin-top: 12px;
                                    cursor: pointer;
                                    background: #20A0FF;
                                    border-radius: 15px;
                                }
                                .btn-group {
                                    display: flex;
                                    margin-top: 12px;
                                    .order_detail {
                                        padding: 0 10px;
                                        height: 26px;
                                        cursor: pointer;
                                        text-align: center;
                                        line-height: 26px;
                                        border-radius: 13px;
                                        color: #333;
                                        font-weight: 500;
                                        font-size: 12px;
                                        border: 1px #D7D7D7 solid;
                                        margin: 0 6px;
                                    }
                                    .border {
                                        border: 1px #20A0FF solid;
                                        color: #20A0FF;
                                    }
                                }
                            }
                            .order_side_info_fatch:last-child .order_side_info:last-child {
                                border-bottom: none;
                            }
                            .order_side_bottom:last-child {
                                border-bottom: none;
                            }
                        }
                        .no-padding {
                            padding: 0;
                        }
                    }
                }
            }
        }
    }
    // 同意退款
    .agreeMod {
        display: flex;
        flex-direction: column;
        .mod-list {
            display: flex;
            align-items: center;
            margin-bottom: 24px;
            &-title {
                width: 68px;
                color: #666;
                font-size: 14px;
                white-space: nowrap;
            }
            &-content {
                width: 444px;
                color: #333;
            }
        }
    }
}
.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
</style>

<style lang="less">
.tableProtection {
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .el-dialog__body {
        padding-left: 64px;
        padding-right: 64px;
        padding-bottom: 0px;
    }
    .mod-list {
        .el-radio__label {
            padding-left: 5px;
        }
        .el-radio {
            margin-right: 16px;
        }
    }
}
.el-textarea__inner {
    resize: none;
}
</style>
